<template>
    <div>
        <el-form :inline="true" :model="searchMap" class="demo-form-inline">
            <el-form-item label="输入搜索">
                <el-input v-model="searchMap.name" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
            <el-select v-model="searchMap.order_status" clearable  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="设置时间">
                <el-date-picker
                v-model="searchMap.create_time"
                align="right"
                type="date"
                placeholder="请选择时间"
                :picker-options="pickerOptions"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
         <!--数据表格-->
      <template class="tableTemplate">
        <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
            label="编号"
            width="180" prop="id">
        </el-table-column>
        <el-table-column
            label="用户名"
            width="180" prop="username">
        </el-table-column>
        <el-table-column
            label="手机号码"
            width="180" prop="receiver_mobile">
        </el-table-column>
         <el-table-column
            label="收货地址"
            prop="receiver_address">
        </el-table-column>
        <el-table-column
            label="商品名称"
            prop="name">
        </el-table-column>
        <el-table-column
            label="商品货号"
            prop="sn">
        </el-table-column>
        <el-table-column
            label="设置时间"
            prop="create_time">
            <template slot-scope="scope">
              {{scope.row.create_time | dateFormat}}天
            </template>
        </el-table-column>
        <el-table-column
            label="提醒状态"
            width="180" prop="takeTorder_statusimeout">
            <template slot-scope="scope">
              {{scope.row.order_status == '0'? '待付款':
              scope.row.order_status == '1'? '待发货':
              scope.row.order_status == '2'? '已发货':
              scope.row.order_status == '3'? '已完成':
              '已关闭'}}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
            <el-button
                size="mini"
                @click="addOrUpdateForm(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </template>
    </div>
</template>
<script>
export default {
  data () {
    return {
      // 显示数据
      tableData: [],
      // 当前页数
      currentPage: 1,
      // 页大小
      pageSize: 10,
      // 当前页显示多少数据
      pageSizeList: [10, 20, 50],
      // 总记录数
      total: 0,
      // 查询表单对象
      searchMap: {},
      // 对话框状态
      dialogFormVisible: false,
      // 对话框表单提交的数据
      form: {},
      options: [{
        value: '2',
        label: '已发送'
      }, {
        value: '1',
        label: '未发送',
        disabled: true
      }],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  methods: {
    // 获取品牌信息列表
    async getfindAll () {
      // 发送请求查询数据并返回
      const { data: res } = await this.$http.post(`/orders/order/findReminds/${this.currentPage}/${this.pageSize}`, this.searchMap)
      this.tableData = res.data.rows
      this.total = res.data.total
      console.log(res.data.rows)
    },
    // 查询按钮
    onSubmit () {
      this.getfindAll()
    },
    // 页大小改变
    async handleSizeChange (val) {
      this.pageSize = val
      this.getfindAll()
    },
    // 页码改变
    async handleCurrentChange (val) {
      this.currentPage = val
      this.getfindAll()
    }
  },
  // 钩子函数
  async created () {
    this.getfindAll()
  }
}
</script>
